<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div{
           height: 300px;
           background-color: yellow; 
           /* 显示的列数 */
           column-count: 5;
           /* 调整列间距 */
           column-gap: 60px;
           /* 列的边框 */
           column-rule: 2px solid red;
           /*控制列高度统一  auto 沾满  balance统一高度 */
           /* column-fill: auto; */

           /* 调整裂宽 */
           /* column-width: 300px; */
           
        

        }

        div h1{
            /* 横跨所有 */
            column-span: all;
            text-align: center;
        }

    </style>

</head>
<body>
    
    <div>
        <h1>dsdsds</h1>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aut, reiciendis, magni soluta laborum commodi possimus dolorem corrupti accusamus explicabo magnam rem! At magnam ipsum earum quaerat consectetur odio dolorem ad!
        
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum explicabo officiis aliquam quod sunt corporis aperiam doloribus? Officia cupiditate, quam aliquam deleniti ab dolore quis accusantium? Quos perferendis doloribus reiciendis.

    </div>
</body>
</html>